<%@page pageEncoding="UTF-8" contentType="text/html;charset=utf-8" errorPage="/commons/error.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>商品</title>
<style type="text/css">
table{font-size: 12px;}
</style>
</head>
<body>
<div>
	<c:if test="${result != null && result.code != 0}">
		<span style="color: red">Warning: ${result.msg }</span>
	</c:if>
	<c:if test="${result.code == 0}">
		<span style="color: blue">${result.msg }</span>
	</c:if>
</div>
<form:form id="form-update" class="form-inline" commandName="product" action="${ctx}/admin/product/add" method="post" enctype="multipart/form-data">
		<form:hidden path="id" />
		<table class="table table-striped">
			<tr>
				<td><label for="name">名称</label></td>
				<td><form:input path="name" class="form-control width-200"
						placeholder="商品名称" /></td>
			</tr>
			<tr>
				<td width="10%"><label for="category">种类</label></td>
				<td><form:select path="category_id" class="form-control width-200">
						<option></option>
						<form:options items="${category}" itemLabel="name" itemValue="id"/>
					</form:select></td>
			</tr>
			<tr>
				<td><label for="image">图片</label></td>
				<td>
					<div id="localImage"  style="width: 300px; height: 200px; margin-bottom: 10px">  
   						<img id="preview" alt="预览图片" src="/images/no-image.jpg" width="100%" height="100%"/>  
					</div> 
					<input name="img_file" id="img_file" type="file" onchange="setImagePreview(this,localImage,preview)"/>
				</td>
			</tr>
			<tr>
				<td><label for="name">描述</label></td>
				<td><form:textarea path="description" class="form-control width-200" rows="8"
						placeholder="商品描述" /></td>
			</tr>
			<tr>
				<td><label>首页推荐</label></td>
				<td><form:checkbox path="recommended" /></td>
			</tr>
			<tr>
				<td><label>激活</label></td>
				<td><form:checkbox path="active" /></td>
			</tr>
			<tr>
				<td colspan="2">
					<button type="submit" class="btn btn-primary">提交</button>
				</td>
			</tr>
		</table>
	</form:form>
<script type="text/javascript" src="${ctx}/scripts/lottery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#nav_product").addClass("active");
	})
	
	function setImagePreview(docObj,localImagId,imgObjPreview) {
		if(docObj.files && docObj.files[0])  
        {  
            //火狐下，直接设img属性  
            imgObjPreview.style.display = 'block';  
            imgObjPreview.style.width = '300px';  
            imgObjPreview.style.height = '200px';                      


            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式    
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  
        }  
        else  
        {  
            //IE下，使用滤镜  
            docObj.select();  
            var imgSrc = document.selection.createRange().text;  
              
            //必须设置初始大小  
            localImagId.style.width = "300px";  
            localImagId.style.height = "200px";  
              
            //图片异常的捕捉，防止用户修改后缀来伪造图片  
            try  
            {  
                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
             }  
             catch(e)  
             {  
                alert("您上传的图片格式不正确，请重新选择!");  
                return false;  
              }                            
              imgObjPreview.style.display = 'none';  
              document.selection.empty();  
        }  
        return true;
	}
</script>
</body>
</html>